<script setup lang='ts'>
import { ref, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Search, Minus, Plus } from "@element-plus/icons-vue";

import { ElMessage } from "element-plus";
import { useEnumStore } from "@/store/enumeration"
import { equityIncrementQuotaPost } from "@/api/equity"
import useInstance from "@/hooks/useInstance";


defineOptions({
    name: "addQuotaAd",
});

const {  quotaOperateType } = useEnumStore()
const emit = defineEmits(["refresh"]);
const { global } = useInstance();
const dialogBasic = ref({
    title: "新建权益立减金",
    visible: false,
    width: 600,
    height: 300,
    showFooter: true,
    marginTop: "10vh",
});

const ruleFormRef = ref<FormInstance>();

const channelForm = reactive<any>({
    quota: null, //  配额
    quotaOpType: null, //  配额操作类型
    remarks: null, //  备注
    reductionVoucherCode: null, //  立减金 code

});
const rules = reactive<FormRules>({
    remainderQuota: [
        {
            required: true,
            trigger: "blur",
            message: "请输入配额",
        },
    ],
    quotaOpType: [
        {
            required: true,
            trigger: "blur",
            message: "请选择配额操作类型",
        },
    ],



});
//显示弹框
const show = (type: string, row?: any) => {
    //reductionVoucherCode
    dialogBasic.value.visible = true;

    dialogBasic.value.title = "新建立减金配额";
    dialogBasic.value.height = 300;
    global.$resetForm(ruleFormRef.value, channelForm);
    channelForm.reductionVoucherCode = row.reductionVoucherCode
    resetForm();

};
const onClose = () => {
    dialogBasic.value.visible = false;

    resetForm();
};
const onConfirm = async () => {
    await ruleFormRef.value?.validate(async (isOk) => {
        if (isOk) {
        
            const res = await equityIncrementQuotaPost(channelForm);
            if (res.code == 20000) {
                ElMessage({
                    type: "success",
                    message:  "立减金配额新增成功",
                });
            }
            emit("refresh");
            onClose();
        } else {
            ElMessage({
                type: "error",
                message:  "立减金配额新增失败 请重试！",
            });
        }
    });
};

const resetForm = () => {
    ruleFormRef.value?.resetFields();
};

defineExpose({
    show,
});
</script>

<template>
    <SysDialog :title="dialogBasic.title" :width="dialogBasic.width" :height="dialogBasic.height"
        :show-footer="dialogBasic.showFooter" :visible="dialogBasic.visible" :margin-top="dialogBasic.marginTop"
        @on-close="onClose" @on-confirm="onConfirm">
        <template v-slot:content>
            <div class="channel-form">
                <el-form ref="ruleFormRef" :model="channelForm" :rules="rules" label-width="130px" class="demo-ruleForm"
                    status-icon>

                    <el-form-item label="立减金配额" prop="quota">
                        <el-input v-model.number="channelForm.quota" showLimit />
                    </el-form-item>

                    <el-form-item label="配额操作类型" prop="enabled">
                        <my-select v-model:select-value="channelForm.quotaOpType" :multiple="false"
                            :options="quotaOperateType"></my-select>
                    </el-form-item>
                    <el-form-item label="备注" prop="remarks">
                        <AddInput v-model:model-value="channelForm.remarks"></AddInput>
                    </el-form-item>

                </el-form>
            </div>

        </template>
    </SysDialog>
</template>

<style lang='scss' scoped>
.channel-form {
    max-height: 600px;
    overflow: auto;
}
</style>
